<template>
  <!-- 歌手信息页专辑列表 -->
  <div class="mtop-60">
    <div class="list-container">
      <div style="width: 200px">
        <img
          class="img img-radius-8 img-border"
          :src="albumInfo.picUrl"
          alt=""
        />
      </div>
      <div class="mleft-40 list-content">
        <div>
          <span class="font-bold" @click="toAlbumDetail">{{
            albumInfo.name
          }}</span>
          <button class="no-btn mleft-20 font-20" @click="playAllMusic">
            <i class="el-icon-video-play"></i>
          </button>
        </div>
        <el-table
          :data="disList"
          style="width: 100%"
          size="mini"
          stripe
          @row-dblclick="playMusic"
        >
          <el-table-column type="index" width="50" label="#"></el-table-column>
          <el-table-column
            prop="name"
            show-overflow-tooltip
            label="音乐标题"
          ></el-table-column>
          <el-table-column prop="dt" label="时长">
            <template v-slot="scope">
              {{ (scope.row.dt / 1000) | timeFormat }}
            </template>
          </el-table-column>
        </el-table>
        <div class="mleft-100" v-show="total > 10">
          <button class="pointer no-btn mtop-10" @click="toAlbumDetail">
            查看全部{{ total }}首<i class="el-icon-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["albumInfo", "list"],
  computed: {
    disList() {
      return this.list.slice(0, 10);
    },
    total() {
      return this.list.length;
    },
    ...mapState(["musicList"]),
  },
  methods: {
    toAlbumDetail() {
      this.$router.push({ path: `/albumdetail/${this.albumInfo.id}` });
    },
    playAllMusic() {
        if(this.list.length == 0) return;
        let id = this.list[0].id;
        this.$store.commit('setMusicList',this.list);
        this.$store.commit('setCurrenMusicId',id);
        this.$store.commit('setPlayState',true);
        this.getIndex(id);
    },
    playMusic(row) {
      this.$store.commit("setMusicList", this.list);
      this.$store.commit("setCurrenMusicId", row.id);
      this.$store.commit("setPlayState", true);
      this.getIndex(row.id);
    },
    //获取当前歌曲的下标
    getIndex(id) {
      if (this.musicList.length === 0) return;
      let index = this.musicList.findIndex((item) => item.id == id);
      this.$store.commit("setCurrenIndex", index);
    },
  },
};
</script>

<style lang="less" scoped>
.list-container {
  display: flex;
  .list-content {
    flex: 1;
  }
}
</style>